import React, { useState } from 'react';
import moment from 'moment';
import './scss/Calendar.scss'; // 样式文件
import { message } from 'antd';

const Calendar = ({ calendarVoList, getMyWeeklyDayDetailList }) => {
    const [selectedDate, setSelectedDate] = useState(moment().format('YYYY-MM-DD 00:00:00')); // 追踪当前选中的日期，初始化为当前日期
    // 找到包含 beToday 为1的月份索引
    const findCurrentMonthIndex = () => {
        for (let i = 0; i < calendarVoList.length; i++) {
            const monthData = calendarVoList[i];
            const found = monthData.calendarDetaiForPersonalVoList.some(day => day.beToday === "1");
            if (found) {
                return i;
            }
        }
        return 0; // 如果找不到，默认返回第一个月份索引
    };
    const [currentMonthIdx, setCurrentMonthIdx] = useState(findCurrentMonthIndex()); // 追踪当前显示的月份索引

    // 找到当前月份索引中的第一个日期的date
    const findFirstDateOfCurrentMonth = () => {
        const currentMonthData = calendarVoList[currentMonthIdx];
        if (currentMonthData && currentMonthData.calendarDetaiForPersonalVoList.length > 0) {
            return currentMonthData.calendarDetaiForPersonalVoList[0].date;
        }
        return null; // 如果没有数据或者索引无效，返回null或者其他适当的默认值
    };

    // 获取当前月份索引中第一个日期date
    const firstDateOfCurrentMonth = findFirstDateOfCurrentMonth();
    const formattedDate = moment(firstDateOfCurrentMonth).format('YYYY年M月');

    const renderCalendar = () => {
        const currentMonthData = calendarVoList[currentMonthIdx];
        const { month, calendarDetaiForPersonalVoList } = currentMonthData;
        console.log(month, 'month');
        // 获取当前月份第一天是星期几
        const firstDayOfWeek = calendarDetaiForPersonalVoList[0].weekNo; // 假设第一项就是第一天的数据
        const emptyDays = firstDayOfWeek - 1; // 需要插入的空白占位符数量
        // 构建一个有空白占位符的日期数组
        let calendarDays = [];

        // 插入空白占位符
        for (let i = 0; i < emptyDays; i++) {
            calendarDays.push({ date: null }); // 使用 null 表示空位
        }

        // 将日期数据添加到数组中
        calendarDays = calendarDays.concat(calendarDetaiForPersonalVoList);

        // 创建日历表格 
        return (
            <div key={month} className="calendar-month-container">
                {/* <h2 className="calendar-month">{month}月</h2> */}
                <div className="calendar-body user-calendar-body">
                    <div className="calendar-months">
                        <div className="calendar-week">
                            {calendarDays.map((dateData, index) => {
                                // 根据属性设置不同的类名和标签
                                let className = 'calendar-day';
                                let label = '';
                                if (dateData.beWorkday === "1") {
                                    className += ' workday';
                                    label = '补班';
                                } else if (dateData.beHoliday === "1") {
                                    className += ' holiday';
                                    label = '节日';
                                } else if (dateData.beActivityDay === "1") {
                                    className += ' activity';
                                } else if (dateData.recordDetailVoList && dateData.recordDetailVoList.length > 0 && selectedDate !== dateData.date) {
                                    let data = dateData.recordDetailVoList;
                                    let foundItem = data.find(item => item.personnelPlayId === "1");
                                    let allAreOne = data.every(item => item.beRecordEdit === "1");
                                    if (foundItem) {
                                        if (allAreOne) {
                                            className += ' haveRecord';
                                        } else {
                                            className += ' myContent';
                                        }
                                    } else {
                                        className += ' haveContent';
                                    }
                                }

                                if (dateData.date) {
                                    className += ' clickable';
                                }
                                if (selectedDate === dateData.date) {
                                    className += ' selected';
                                }

                                const handleDateClick = () => {
                                    if (dateData.date) {
                                        setSelectedDate(dateData.date);
                                        getMyWeeklyDayDetailList(dateData);
                                    }
                                };

                                return (
                                    <div key={index} onClick={() => handleDateClick(dateData)} className={`${className} ${dateData.date ? '' : 'empty'}`}>
                                        {dateData.date ? (dateData.beToday === "1" ? '今' : new Date(dateData.date).getDate()) : ''}
                                        {dateData.beHoliday === "1" && <div className="holiday-label">节日</div>}
                                        {dateData.beWorkday === "1" && <div className="workday-label">补班</div>}
                                    </div>
                                );
                            })}
                        </div>
                    </div>
                </div>
            </div>
        );
    };

    const handlePrevMonth = () => {
        if (currentMonthIdx > 0) {
            setCurrentMonthIdx(currentMonthIdx - 1);
        } else {
            message.warn('已经是该学期最小月份！');
        }
    };

    const handleNextMonth = () => {
        if (currentMonthIdx < calendarVoList.length - 1) {
            setCurrentMonthIdx(currentMonthIdx + 1);
        } else {
            message.warn('已经是该学期最大月份！');
        }
    };

    return (
        <div className="calendar-container calendar-container-teacher">
            <div className="month-navigation">
                <div className="month-nav-item" onClick={handlePrevMonth}>
                </div>
                <div className="current-month">
                    {formattedDate}
                </div>
                <div className="month-nav-item next_icon" onClick={handleNextMonth}>
                </div>
            </div>
            <div className="fixed-weekdays teacher_weekdays">
                {['一', '二', '三', '四', '五', '六', '日'].map((day, index) => (
                    <div key={index} className="fixed-weekday">{day}</div>
                ))}
            </div>
            {renderCalendar()}
        </div>
    );
};

export default Calendar;
